<template>
  <div class="slider-pips">
    <!-- {{values}} -->
    <!-- {{vals}} -->
    <!-- timeColor==1||timeColor==3? -->
    <input v-for="(value, index) in values"
        :key="'range' + index"
        class="slider-pips__range"
        :class="['imp'+timeColor, 'slider-pips__range--' + (index + 1) ]"
        type="range"
        :min="min"
        :max="max"
        :step="step"
        :value="value"
        :disabled="timeColor==2||timeColor==4?true:false"
        @mouseup ="updateValue( $event, index )"
        />
        <!-- @change="updateValue( $event, index )"  -->

        <!-- 时间轴范围的 -->
        <!-- <ul v-if="floats"
            class="slider-pips__floats">
                <li v-for="(value, index) in vals"
                :key="index"
                    class="slider-pips__float"
                    :class="[ 'slider-pips__float--' + (index + 1) ]"
                    :style="{ 'left': floatPos(value) }">
                    {{value}}
                </li>
        </ul>
        <div v-if="isRange" class="slider-pips__range-holder">
            <div class="slider-pips__range-selection"
            :style="{ width: rangeWidth, left: rangeLeft }">
            </div>
        </div> -->

        <ul class="slider-pips__pips">
          <li
            class="slider-pips__pip"
            :class="[
              'imp'+timeColor,//timeColor==1||timeColor==3? //timeColor==2||timeColor==4?'':
              {
                'slider-pips__pip--selected': isPipSelected( index ),
                'slider-pips__pip--in-range': isPipInRange( index )
              },
              selectedPipClassName( index )
            ]"
                v-for="( pip, index ) in pipCount"
                :key="index"
                @click="selectPip( index )"
                :style="{ left: pipPos( index ) }">

            <span v-if="index+1!=13" class="slider-pips__label"
                  :class="[{ 'slider-pips__label--hidden': !labels }]">
                  {{ pipLabel( index ) +"月"}}
            </span>
            <!-- timeColor==2||timeColor==4?'disableSelect':'', 人口和产业禁止点击-->
            <!-- 全年刻度 -->
            <span style="width:32px;" v-if="index+1==13" class="slider-pips__label"
                  :class="[{ 'slider-pips__label--hidden': !labels }]">
                  全年
            </span>
        </li>
      </ul>
    </div>

</template>

<script>
import '@/assets/vuejs-slider-pips/css/normalize.min.css'
import '@/assets/vuejs-slider-pips/css/style.css'

export default {
  name: '',
  components: {},
  data () {
    return {
      // 注意 vals 和 values 原文档中使用vals 返回的数组形式[9,7] 会记录上一次点击的
      vals: this.values
      // sliderValues: [-12, 12],
      // hugeValues: [-30, -10, 20, 30]
    }
  },
  props: {
    values: { type: Array, default: [0] },
    min: { type: Number, default: 0 },
    max: { type: Number, default: 100 },
    step: { type: Number, default: 1 },
    labels: Boolean,
    range: Boolean,
    floats: Boolean,
    // 颜色
    timeColor: { type: Number, default: 0 },
    sliderTag: String
  },
  computed: {
    isRange: function isRange () {
      return this.range
    },
    pipCount: function pipCount () {
      return Math.round((this.fixedMax - this.fixedMin) / this.fixedStep + 1)
    },
    fixedStep: function fixedStep () {
      return this.fixValue(this.step)
    },
    fixedMin: function fixedMin () {
      return this.fixValue(this.min)
    },
    fixedMax: function fixedMax () {
      return this.fixValue(this.max)
    },
    rangeFraction: function rangeFraction () {
      return 100 / (this.fixedMax - this.fixedMin)
    },
    rangeWidth: function rangeWidth () {
      if (this.vals.length === 1) {
        return (this.vals[0] - this.fixedMin) * this.rangeFraction + '%'
      } else {
        return (this.vals[1] - this.vals[0]) * this.rangeFraction + '%'
      }
    },
    rangeLeft: function rangeLeft () {
      if (this.vals.length === 1) {
        return '0%'
      } else {
        return -(this.fixedMin - this.vals[0]) * this.rangeFraction + '%'
      }
    }
  },
  methods: {
    fixValue: function fixValue (value) {
      return parseFloat(parseFloat(value).toFixed(2))
    },
    pipPos: function pipPos (index) {
      return index * this.rangeFraction * this.fixedStep + '%'
    },
    floatPos: function floatPos (value) {
      value = this.fixValue(value)
      return -(this.fixedMin - value) * this.rangeFraction + '%'
    },
    pipLabel: function pipLabel (index) {
      return this.fixValue(this.fixedMin + index * this.fixedStep)
    },
    // 点击
    selectPip: function selectPip (index) {
      var pipValue = this.fixValue(this.fixedMin + index * this.fixedStep)
      var handle = this.getClosestHandle(pipValue)
      this.$set(this.vals, handle, pipValue)
      // this.$emit('changeSliderPipValue',pipValue)

      if (this.sliderTag == 'left') {
        this.$store.dispatch('changeleftmonth', pipValue)
      } else if (this.sliderTag == 'right') {
        this.$store.dispatch('changerightmonth', pipValue)
      } else {
        this.$store.dispatch('changemonth', pipValue)
      }
    },
    isPipSelected: function isPipSelected (index) {
      var pipValue = this.fixValue(this.fixedMin + index * this.fixedStep)
      // vals 和 values 是有区别的 这里vals错误 使用values
      // return this.vals.includes(pipValue)
      return this.values.includes(pipValue)
    },
    isPipInRange: function isPipInRange (index) {
      var pipValue = this.fixValue(this.fixedMin + index * this.fixedStep)
      return pipValue >= this.fixedMin && pipValue <= this.vals[0]
    },
    // 滑动
    updateValue: function updateValue (ev, handle) {
      var pipValue = this.fixValue(ev.target.value)
      if (this.isRange && this.vals.length > 1) {
        if (handle === 0 && pipValue > this.vals[1]) {
          this.$set(this.vals, 0, this.vals[1])
        } else if (handle === 1 && pipValue < this.vals[0]) {
          this.$set(this.vals, 1, this.vals[0])
        } else {
          this.$set(this.vals, handle, pipValue)
        }
      } else {
        this.$set(this.vals, handle, pipValue)
      }
      if (this.sliderTag == 'left') {
        this.$store.dispatch('changeleftmonth', pipValue)
      } else if (this.sliderTag == 'right') {
        this.$store.dispatch('changerightmonth', pipValue)
      } else {
        this.$store.dispatch('changemonth', pipValue)
      }
    },
    getClosestHandle: function getClosestHandle (value) {
      var closest = this.vals.reduce(function (p, c) {
        return Math.abs(c - value) < Math.abs(p - value) ? c : p
      })
      return this.vals.indexOf(closest)
    },
    selectedPipClassName: function selectedPipClassName (pipIndex) {
      var className = ''
      var pipValue = this.fixValue(this.fixedMin + pipIndex * this.fixedStep)
      this.vals.forEach(function (v, i) {
        if (v === pipValue) {
          className += ' slider-pips__pip--selected--' + (i + 1)
        }
      })
      return className
    } }
}
</script>
<style lang='stylus' scoped>
// 人口和产业 禁止时间轴的滑动和选择点击
.disableSelect
  pointer-events none
.slider-pips__label{
  width 36px
}

</style>
